<template>
    <div class="cen">
        <div class="top">
            <div>
                <a href="###">
                    <img src="@/assets/12-10/2.png" alt="" @click="fa">
                </a>
            </div>
                <div class="top-top">
                    <img src="@/assets/12-10/1.png" alt="">
                </div>
            </div>
        <!-- 内容 --> 
        <div class="main">
            <div class="main-input">
                <div class="main-input-box">
                    <p>
                        {{num+1}}、{{text[num]}}
                    </p>
                    <p v-for="(value,index) in keys[num]" :key="index">
                        <span>
                            <input type="radio">
                            <label for="">
                             {{keys[num][index] }}
                            </label>
                        </span>
                    </p>
                </div>
            </div>
        </div>
        <div class="foot">
            <button @click="fn">确定</button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            num:0,
            text:[
                "十八大修改党章遵循的原则____。",

                "十八大提出要建设学习型、服务型、____马克思主义执政党等新内容。",

                '____是党的根本大法？',

                '本次增写了党的各级领导干部必须具备的基本条件的内容，强调党的各级领导干部要____',

                '党章修正案最总纲部分关于党的建设的总体要求做了适当修改。增写了加强党的____建设，整体推进党的思想建设、组织建设、作风建设、反腐倡建设、制度建设，全面提高党的建设科学化水平。'],
            keys:[
                ["A.坚持以马克思列宁主义、毛泽东思想、邓小平理论、“三个代表”重要思想和科学发展观为指导","B.坚持发扬党内民主，集中全党智慧","C.保持党章总体稳定，只修改那些必须改的，在党内已经形成共识的内容","D.以上都是"],
                ['A.活力型的','B.和谐型的','C.小康型的','D.创新型的'],
                ['A.宪法','B.党章','C.行政法','D.中国共产党纪律处分条例'],
                ['A.坚持原则，讲党性、重品行、做表率','B.照镜子、正衣冠、洗洗澡、治治病','C.严以修身、严以律己、严以用权','D.以上都不是'],
                ['A.队伍','B.纯洁性','C.纪律性','D.纯洁度']
                ],
        }
    },
    methods:{
        fn(){
            if(this.num>=4){
                this.num=4
            }else{
                ++this.num;
            }
        },
         fa(){
            this.$emit("son","Tou");
        }
    }
}
</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
}
.cen {
    width:640px;
    height: 1000px;
    margin: auto;
    background: url("C:/Users/14129/Documents/web1906vue/webvue/src/assets/12-10/01.png");
}
.top {
    position: relative;
    padding-top: 164px;
    width:100%;
}
.top>div>a>img {
    top: 50px;
    right: 30px;
    position: absolute;
}

.top-top h1 {
    color:white;
    padding: 30px;
    text-align: left;
}
.top-top h2 {
    text-align:center;
    font-family: "宋体";
    font-size: 45px;
    padding-top: 70px;
    padding-bottom: 50px;
}

/* main */
.main {
    width: 100%;
}
.main-input {
    background: rgb(239,101,101);
    width:96%;
    margin: 0 2% 0;
}
.main-input-box {
    padding: 10px 15px 15px;
}
.main-input-box p {
    color:white;
    font-size: 30px;
}
.main-input-box span input {
    width: 20px;
    height: 20px;
}

/* foot */
.foot {
    width: 100%;
    padding-top: 70px;
    padding-bottom:150px;
}
.foot button {
    width: 40%;
    margin: auto;
    background: rgb(254,198,31);
    color: red;
    display: block;
    height: 80px;
    font-size: 30px;
    border-radius: 25px;
    padding-bottom: 30px;
}


</style>